<template>
  <a-layout class="min-h-screen">
    <!-- 侧边栏 -->
    <a-layout-sider
      v-model:collapsed="collapsed"
      :trigger="null"
      collapsible
      class="shadow-lg"
    >
      <div class="logo-container">
        <div class="logo-content" :class="{ 'collapsed': collapsed }">
          <div class="logo-icon">
            <qrcode-outlined class="text-2xl" />
          </div>
          <div class="logo-text">
            <h1 class="text-xl font-bold">蒜苔二维码</h1>
            <div class="logo-subtitle">活码平台</div>
          </div>
        </div>
      </div>
      <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="inline"
      >
        <a-menu-item key="dashboard">
          <template #icon>
            <dashboard-outlined />
          </template>
          <router-link to="/admin/dashboard">工作台</router-link>
        </a-menu-item>

        <a-sub-menu key="qrcode-management">
          <template #icon>
            <qrcode-outlined />
          </template>
          <template #title>二维码管理</template>
          <a-menu-item key="miaoma-suantaiqrcode">
            <template #icon>
              <qrcode-outlined />
            </template>
            <router-link to="/admin/qrcode-management/miaoma-suantaiqrcode">二维码列表</router-link>
          </a-menu-item>
          <!-- <a-menu-item key="batch-generate">
            <template #icon>
              <cluster-outlined />
            </template>
            <router-link to="/admin/qrcode-management/batch-generate">批量生成</router-link>
          </a-menu-item>
          <a-menu-item key="template-management">
            <template #icon>
              <layout-outlined />
            </template>
            <router-link to="/admin/qrcode-management/template-management">模板管理</router-link>
          </a-menu-item> -->
        </a-sub-menu>

        <!-- <a-sub-menu key="content-management">
          <template #icon>
            <file-text-outlined />
          </template>
          <template #title>内容管理</template>
          <a-menu-item key="landing-pages">
            <template #icon>
              <global-outlined />
            </template>
            <router-link to="/content-management/landing-pages">落地页管理</router-link>
          </a-menu-item>
          <a-menu-item key="file-library">
            <template #icon>
              <folder-outlined />
            </template>
            <router-link to="/content-management/file-library">文件库</router-link>
          </a-menu-item>
          <a-menu-item key="form-management">
            <template #icon>
              <form-outlined />
            </template>
            <router-link to="/content-management/form-management">表单管理</router-link>
          </a-menu-item>
          <a-menu-item key="multimedia-management">
            <template #icon>
              <play-circle-outlined />
            </template>
            <router-link to="/content-management/multimedia-management">多媒体管理</router-link>
          </a-menu-item>
        </a-sub-menu> -->

        <a-sub-menu key="user-management">
          <template #icon>
            <team-outlined />
          </template>
          <template #title>用户管理</template>
          <a-menu-item key="user-list">
            <template #icon>
              <user-outlined />
            </template>
            <router-link to="/admin/sysuser">用户列表</router-link>
          </a-menu-item>
          <a-menu-item key="role-permissions">
            <template #icon>
              <safety-outlined />
            </template>
            <router-link to="/admin/rolemanagement" @click="testRolePermissionClick">角色权限</router-link>
          </a-menu-item>
          <a-menu-item key="permission-management">
            <template #icon>
              <safety-outlined />
            </template>
            <router-link to="/admin/permissionmanagement">权限管理</router-link>
          </a-menu-item>
<!--          <a-menu-item key="organization">-->
<!--            <template #icon>-->
<!--              <apartment-outlined />-->
<!--            </template>-->
<!--            <router-link to="/admin/user-management/organization">组织架构</router-link>-->
<!--          </a-menu-item>-->
          <!-- <a-menu-item key="membership-plans">
            <template #icon>
              <crown-outlined />
            </template>
            <router-link to="/admin/user-management/membership-plans">会员套餐</router-link>
          </a-menu-item> -->
        </a-sub-menu>

        <a-sub-menu key="log-management">
          <template #icon>
            <file-text-outlined />
          </template>
          <template #title>日志管理</template>
          <a-menu-item key="operation-log">
            <template #icon>
              <audit-outlined />
            </template>
            <router-link to="/admin/sysoperationlog">操作日志管理</router-link>
          </a-menu-item>
          <a-menu-item key="error-log">
            <template #icon>
              <bug-outlined />
            </template>
            <router-link to="/admin/syserrorlog">异常日志管理</router-link>
          </a-menu-item>
          <a-menu-item key="auth-log">
            <template #icon>
              <user-outlined />
            </template>
            <router-link to="/admin/sysuserauthlog">认证日志管理</router-link>
          </a-menu-item>
        </a-sub-menu>

        <!-- <a-sub-menu key="marketing-tools">
          <template #icon>
            <rocket-outlined />
          </template>
          <template #title>营销工具</template>
          <a-menu-item key="campaign-management">
            <template #icon>
              <flag-outlined />
            </template>
            <router-link to="/marketing-tools/campaign-management">活动管理</router-link>
          </a-menu-item>
          <a-menu-item key="coupon-management">
            <template #icon>
              <gift-outlined />
            </template>
            <router-link to="/marketing-tools/coupon-management">优惠券</router-link>
          </a-menu-item>
          <a-menu-item key="lottery-activities">
            <template #icon>
              <trophy-outlined />
            </template>
            <router-link to="/marketing-tools/lottery-activities">抽奖活动</router-link>
          </a-menu-item>
          <a-menu-item key="share-fission">
            <template #icon>
              <share-alt-outlined />
            </template>
            <router-link to="/marketing-tools/share-fission">分享裂变</router-link>
          </a-menu-item>
        </a-sub-menu> -->

        <!-- <a-sub-menu key="data-statistics">
          <template #icon>
            <bar-chart-outlined />
          </template>
          <template #title>数据分析</template>
          <a-menu-item key="scan-statistics">
            <template #icon>
              <line-chart-outlined />
            </template>
            <router-link to="/data-statistics/scan-statistics">扫码统计</router-link>
          </a-menu-item>
          <a-menu-item key="regional-analysis">
            <template #icon>
              <environment-outlined />
            </template>
            <router-link to="/data-statistics/regional-analysis">地域分析</router-link>
          </a-menu-item>
          <a-menu-item key="time-analysis">
            <template #icon>
              <clock-circle-outlined />
            </template>
            <router-link to="/data-statistics/time-analysis">时间分析</router-link>
          </a-menu-item>
          <a-menu-item key="device-analysis">
            <template #icon>
              <mobile-outlined />
            </template>
            <router-link to="/data-statistics/device-analysis">设备分析</router-link>
          </a-menu-item>
          <a-menu-item key="conversion-analysis">
            <template #icon>
              <funnel-plot-outlined />
            </template>
            <router-link to="/data-statistics/conversion-analysis">转化分析</router-link>
          </a-menu-item>
          <a-menu-item key="realtime-monitor">
            <template #icon>
              <monitor-outlined />
            </template>
            <router-link to="/data-statistics/realtime">实时监控</router-link>
          </a-menu-item>
        </a-sub-menu> -->

        <a-sub-menu key="system-settings">
          <template #icon>
            <setting-outlined />
          </template>
          <template #title>系统设置</template>
          <a-menu-item key="basic-settings">
            <template #icon>
              <setting-outlined />
            </template>
            <router-link to="/admin/system-settings/basic">基本设置</router-link>
          </a-menu-item>
          <a-menu-item key="security-settings">
            <template #icon>
              <safety-outlined />
            </template>
            <router-link to="/admin/system-settings/security">安全设置</router-link>
          </a-menu-item>
          <a-menu-item key="third-party-config">
            <template #icon>
              <cloud-server-outlined />
            </template>
            <router-link to="/admin/system-settings/third-party">第三方集成</router-link>
          </a-menu-item>
          <a-menu-item key="domain-management">
            <template #icon>
              <global-outlined />
            </template>
            <router-link to="/admin/system-settings/domain-management">域名管理</router-link>
          </a-menu-item>
        </a-sub-menu>

        <!-- 动态菜单组件 -->
        <DynamicMenu />
      </a-menu>

      <!-- 版本号和版权信息 -->
      <div class="footer-info">
        <div class="version-info">
          <span class="text-gray-400 text-xs">v1.0.0</span>
        </div>
      </div>
    </a-layout-sider>

    <a-layout>
      <!-- 顶部导航栏 -->
      <a-layout-header class="bg-white px-6 flex items-center justify-between">
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger text-lg"
          @click="() => (collapsed = !collapsed)"
        />
        <menu-fold-outlined
          v-else
          class="trigger text-lg"
          @click="() => (collapsed = !collapsed)"
        />
        <div class="flex items-center">
          <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent>
              <user-outlined class="mr-2" />
              {{ displayUserName }}
              <down-outlined />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item key="profile">
                  <router-link to="/admin/profile">
                    <user-outlined />
                    个人信息
                  </router-link>
                </a-menu-item>
                <a-menu-item key="logout" @click="handleLogout">
                  <logout-outlined />
                  退出登录
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>

      <!-- 主要内容区域 -->
      <a-layout-content class="m-6 p-6 bg-white">
        <router-view></router-view>
      </a-layout-content>

      <!-- 右侧 Footer -->
      <a-layout-footer class="text-center bg-white">
        <span class="text-gray-400 text-xs">Copyright © 2025 蒜苔二维码活码平台</span>
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { useUserStore } from '@/stores/user'
import DynamicMenu from '@/miaoma/DynamicMenu.vue'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  DashboardOutlined,
  QrcodeOutlined,
  FileTextOutlined,
  TeamOutlined,
  RocketOutlined,
  BarChartOutlined,
  SettingOutlined,
  UserOutlined,
  DownOutlined,
  LogoutOutlined,
  ClusterOutlined,
  LayoutOutlined,
  DeleteOutlined,
  GlobalOutlined,
  FolderOutlined,
  FormOutlined,
  PlayCircleOutlined,
  SafetyOutlined,
  ApartmentOutlined,
  CrownOutlined,
  FlagOutlined,
  GiftOutlined,
  TrophyOutlined,
  ShareAltOutlined,
  LineChartOutlined,
  EnvironmentOutlined,
  ClockCircleOutlined,
  MobileOutlined,
  FunnelPlotOutlined,
  MonitorOutlined,
  CloudServerOutlined,
  AuditOutlined,
  BugOutlined,
} from '@ant-design/icons-vue'

const router = useRouter()
const userStore = useUserStore()
const collapsed = ref(false)
const selectedKeys = ref(['dashboard'])

// 计算属性：获取显示的用户名
const displayUserName = computed(() => {
  if (userStore.userInfo) {
    return userStore.userInfo.realName || userStore.userInfo.username || '用户'
  }
  return '未登录'
})

// 组件挂载时获取用户信息
onMounted(async () => {
  if (userStore.token && !userStore.userInfo) {
    await userStore.fetchUserInfo()
  }
})

const handleLogout = () => {
  userStore.logout()
  message.success('退出成功')
  router.push('/auth/login')
}

const testRolePermissionClick = () => {
  
  // 直接编程式导航测试
  router.push('/admin/rolemanagement').then(() => {
  }).catch(error => {
    console.error('路由跳转失败:', error)
  })
}
</script>

<style scoped>
.trigger {
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: var(--primary-color);
}

.ant-layout-header {
  height: 64px;
  line-height: 64px;
  padding: 0 24px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.ant-layout-sider {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.ant-layout-content {
  min-height: 280px;
  border-radius: 8px;
}

.footer-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.version-info {
  text-align: center;
  margin-bottom: 8px;
}

.logo-container {
  height: 64px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(24, 144, 255, 0.05) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-content {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s;
}

.logo-content.collapsed {
  justify-content: center;
}

.logo-content.collapsed .logo-text {
  display: none;
}

.logo-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color);
  border-radius: 8px;
  color: white;
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-text h1 {
  line-height: 1.2;
  margin: 0;
  background: linear-gradient(90deg, var(--primary-color) 0%, #40a9ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.2;
}

.ant-layout-footer {
  padding: 16px;
  border-top: 1px solid #f0f0f0;
}
</style>